import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'

import Dialog from '@/components/dialog/Index'

import { Button, message } from 'ant-design-vue'
import FileUploadDragger from '@/components/file/UploadDragger'
import { DownloadOutlined } from '@ant-design/icons-vue'
import { downloadTemplate, importOccupation } from '@/api/insureIndustry'
import { downloadBlobFile } from '@/utils/util'
import useConfigStore from '@/stores/config'
import type { UploadFileDto } from '@/components/file/UploadDragger'
import { getModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
@Component
export class ImportWorkTypesPop extends Render {
    @Prop({ default: false }) show!: boolean
    showDialog = false

    fileList = [] as UploadFileDto[]

    @Emit('update:show')
    showChange(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.showDialog = this.show
        if (this.show) {
            this.basicForm = renderForm(this.formConfig)
        }
    }
    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.showChange(this.showDialog)
    }

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '工种导出',
            width: '450px',
            theme: 'dark',
            show: false,
            params: {
                confirmText: '确定'
            },
            items: {
                insureCompanyCode: {
                    name: '导入保司',
                    element: 'select',
                    optionsType: 'insureCompany',
                    required: true
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                console.log(data, 'datadata')
                // const res = await exportOccupation(data.insureCompanyCode)
                // downloadBlobFile(res, useConfigStore().downloadFileName)
            },
            cancel: () => {}
        } as FormModalDto
    }

    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    async onDownloadTemplate() {
        const res = await downloadTemplate()
        downloadBlobFile(res, useConfigStore().downloadFileName)
    }

    async onConfirm() {
        await this.basicForm.validate()
        if (!this.fileList.length) {
            message.error('请选择文件')
            return
        }
        const formData = new FormData()
        formData.append('file', this.fileList[0]?.originFileObj as File)
        const data = getModelValue(this.formConfig)
        await importOccupation(formData, data.insureCompanyCode)
        message.success('导入成功')
        this.showDialog = false
        this.fileList = []
    }

    render() {
        return (
            <>
                <Dialog
                    v-model:show={this.showDialog}
                    width="600px"
                    title="上传附件"
                    showClose
                    v-slots={{
                        footer: () => {
                            return (
                                <div class="flex justify-center">
                                    <Button type="primary" onClick={this.onConfirm}>
                                        确定
                                    </Button>
                                </div>
                            )
                        }
                    }}
                >
                    <div class="W-full">
                        {this.basicForm.element()}
                        <FileUploadDragger
                            v-model={this.fileList}
                            params={{
                                autoUpload: false,
                                accept: '.xlsx,.xls',
                                limit: 1,
                                maxSize: 10 * 1024 * 1024
                            }}
                        ></FileUploadDragger>
                        <div class="flex items-center">
                            <DownloadOutlined style={'color: #3E5FF5'} />
                            <Button type="link" onClick={this.onDownloadTemplate}>
                                下载导入模板
                            </Button>
                        </div>
                    </div>
                </Dialog>
            </>
        )
    }
}

export default toNative<{}, { refresh: () => void }>(ImportWorkTypesPop)
